<template>
  <div>
    <el-card class="table-box">
      <div>
        <div class="title" style="float:left;">项目环境</div>
        <el-button
          type="primary"
          style="float:right;"
          size="mini"
          plain
          icon="el-icon-plus"
          @click="addEnvDlg=true"
        >添加环境</el-button>
      </div>
      <el-table :data="envs" style="width: 100%" :show-header="false">
        <el-table-column prop="name" min-width="60px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="host" min-width="120px" show-overflow-tooltip>
          <template slot-scope="scope">
            <b style="color:#00aaff">{{scope.row.host}}</b>
          </template>
        </el-table-column>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div class="scope-box">
              <el-descriptions title="BaseUrl" border size="mini">
                <el-descriptions-item label="Host">{{scope.row.host}}</el-descriptions-item>
              </el-descriptions>
              <el-descriptions
                title="数据库配置"
                border
                draggable="vertical"
                :column="1"
                size="mini"
                :labelStyle="{width:'120px'}"
              >
                <el-descriptions-item label="host">{{scope.row.db_config.host}}</el-descriptions-item>
                <el-descriptions-item label="user">{{scope.row.db_config.user}}</el-descriptions-item>
                <el-descriptions-item label="password">{{scope.row.db_config.password}}</el-descriptions-item>
                <el-descriptions-item label="db">{{scope.row.db_config.db}}</el-descriptions-item>
                <el-descriptions-item label="charset">{{scope.row.db_config.charset}}</el-descriptions-item>
                <el-descriptions-item label="autocommit">{{scope.row.db_config.autocommit}}</el-descriptions-item>
              </el-descriptions>
              <div style="text-align:center">
                <el-button type="warning" plain size="mini" @click="editEnvShow(scope.row)">修改</el-button>
                <el-button type="danger" plain size="mini" @click="deleteEnv(scope.row)">删除</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="添加环境" :visible.sync="addEnvDlg">
      <el-form>
        <el-form-item>
          <el-input placeholder="请输入环境名称" v-model="addEnvForm.name">
            <template slot="prepend">环境名称</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入服务地址" v-model="addEnvForm.host">
            <template slot="prepend">服务地址</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <div>数据库配置</div>
          <Editor
            style="height:200px"
            language="json"
            theme="chrome"
            :readOnly="false"
            v-model="addEnvForm.db_config"
          ></Editor>
        </el-form-item>
        <el-button type="primary" @click="jsonFormat" size="mini">json数据格式化</el-button>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addEnvDlg = false">取 消</el-button>
        <el-button type="primary" @click="addEnv">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改环境" :visible.sync="editEnvDlg">
      <el-form>
        <el-form-item>
          <el-input placeholder="请输入环境名称" v-model="editEnvForm.name">
            <template slot="prepend">环境名称</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入服务地址" v-model="editEnvForm.host">
            <template slot="prepend">服务地址</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <div>数据库配置</div>
          <Editor
            style="height:200px"
            language="json"
            theme="chrome"
            :readOnly="false"
            v-model="edit_db_config"
          ></Editor>
        </el-form-item>
        <el-button type="primary" @click="jsonEditFormat" size="mini">json数据格式化</el-button>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editEnvDlg=false">取 消</el-button>
        <el-button type="primary" @click="editEnv">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { mapState } from 'vuex'
import Editor from '@/components/Edit.vue'

export default {
  components: { Editor },
  props: {},
  data() {
    return {
      addEnvDlg: false,
      addEnvForm: {
        name: '',
        host: '',
        db_config: `{
  "host": "",
  "user": "",
  "password": "",
  "db": "",
  "charset": "",
  "autocommit": true
}`,
      },
      editEnvDlg: false,
      editEnvForm: { db_config: '' },
    }
  },
  computed: {
    ...mapState(['envs', 'pro']),
    edit_db_config: {
      get: function () {
        const value = this.editEnvForm.db_config
        if (typeof value === 'string') return value
        return JSON.stringify(value, null, 4)
      },
      set: function (value) {
        if (typeof value === 'string') {
          this.editEnvForm.db_config = JSON.parse(value)
        }
        return value
      },
    },
  },
  watch: {},
  methods: {
    ...mapActions(['getEnvs']),
    // 格式化json数据
    jsonFormat() {
      const jsonObj = JSON.parse(this.addEnvForm.db_config)
      this.addEnvForm.db_config = JSON.stringify(jsonObj, null, 4)
    },
    jsonEditFormat() {
      const jsonObj = JSON.parse(this.editEnvForm.db_config)
      this.editEnvForm.db_config = JSON.stringify(jsonObj, null, 4)
    },
    // 新增环境
    async addEnv() {
      const params = {
        name: this.addEnvForm.name,
        host: this.addEnvForm.host,
        project: this.pro.id,
        db_config: this.addEnvForm.db_config,
      }
      const response = await this.$api.createEnv(params)
      if (response.status === 201) {
        this.$message({
          message: '添加环境成功',
          type: 'success',
          duration: 1000,
        })
        this.getEnvs()
      } else {
        this.$message({
          message: '添加环境失败',
          type: 'error',
          duration: 3000,
        })
      }
      this.addEnvDlg = false
    },
    // 修改环境
    editEnvShow(row) {
      this.editEnvForm = row

      this.editEnvDlg = true
    },
    // 修改环境
    async editEnv() {
      const new_db_config = this.edit_db_config
      if (typeof this.edit_db_config === 'string') {
        const new_db_config = JSON.parse(this.edit_db_config)
      }
      const params = {
        id: this.editEnvForm.id,
        name: this.editEnvForm.name,
        host: this.editEnvForm.host,
        project: this.pro.id,
        db_config: new_db_config,
      }
      const response = await this.$api.editEnv(this.editEnvForm.id, params)
      if (response.status === 200) {
        this.$message({
          message: '修改环境成功',
          type: 'success',
          duration: 1000,
        })
        this.getEnvs()
      } else {
        this.$message({
          message: '修改环境失败',
          type: 'error',
          duration: 3000,
        })
      }
      this.editEnvDlg = false
    },
    deleteEnv(row) {
      this.$confirm('确认是否删除该测试环境?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const response = await this.$api.deleteEnv(row.id)
          if (response.status === 204) {
            this.$message({
              type: 'success',
              message: '删除环境成功!',
            })
          } else {
            this.$message({
              message: '删除环境失败',
              type: 'error',
              duration: 3000,
            })
          }
          this.getEnvs()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
  created() {},
  mounted() {},
}
</script>
<style scoped>
.scope-box {
  box-shadow: 0 0 2px #00aaff;
  margin: 5px;
  padding: 5px 10px;
  font: bold 12px/26px 'microsoft yahei';
}
</style>